<template>
  <a-modal
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="600"
    unmount-on-close
  >
    <template #title> 选择模板 </template>
    <div class="index">
      <TableTurn
        :tableData="getPerformanceTemplate"
        ref="tableRef"
        :args="args"
      >
        <a-table-column dataIndex="" title="序号">
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          dataIndex="name"
          title="试用期考核模板名称"
        ></a-table-column>
        <!-- <a-table-column dataIndex="cycleType" title="考核周期"></a-table-column> -->
        <!-- <a-table-column
          dataIndex="performanceAssessmentTemplateRange"
          title="适用范围"
        ></a-table-column> -->
        <!-- <a-table-column dataIndex="" title="创建人"></a-table-column>
        <a-table-column dataIndex="" title="创建时间"></a-table-column> -->
        <!-- <a-table-column dataIndex="" title="启用状态">
          <template #cell="{ record }">
            <StatusTag
              :enable="record.status"
              :lable="record.status === 1 ? '启用' : '禁用'"
            />
          </template>
        </a-table-column> -->
        <!-- <a-table-column
          :width="120"
          data-index=""
          title="操作"
          fixed="right"
          align="center"
        >
          <template #cell="{ record }">
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
                @click="edit(record.id)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
             <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="del(record.id)"
              >
                <icon-font
                  type="icon-delete"
                  :size="26"
                  :style="{
                    cursor: 'pointer',
                    marginRight: '10px'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table-column> -->
      </TableTurn>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import TableTurn, { paramsType } from '@/components/TableTurn/index.vue';
import {
  GetPerformanceAppraisalTemplate,
  GetPerformanceAppraisalTemplateDetails
} from '@/apis/management/performance/baseSetting/template';
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {
    visible: false
  }
);
const emit = defineEmits(['update:visible', 'save']);
const modalVisible = useVModel(props, 'visible', emit);
const tableRef = ref();
const handleOk = () => {
  const id = tableRef.value.selectedListData[0]?.id;
  emit('save', id);
  emit('update:visible', false);
};
const handleCancel = () => {
  emit('update:visible', false);
};
const getPerformanceTemplate = async (params: paramsType) => {
  try {
    const res = await GetPerformanceAppraisalTemplate({
      templateType: 2
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};
const args = reactive({
  rowSelection: {
    type: 'radio'
  }
});
</script>
